<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
</head>

<body>
    <canvas id="cav"></canvas>
    <br />
    <!-- <img src="" alt="canvas转base64" id="image"> -->
    <canvas id="cav2"></canvas>
</body>
<script>
    var canvas = document.getElementById('cav')
    var ctx = canvas.getContext('2d')  // 获取上下文对象
    canvas.width = 900
    canvas.height = 600
    canvas.style.border = '1px solid #000'
    //1.绘制三角形
    // ctx.beginPath()
    // ctx.moveTo(100, 100)
    // ctx.lineTo(300, 100)
    // ctx.lineTo(300, 300)
    // ctx.closePath()
    // ctx.stroke()
    // ctx.fillStyle="red"
    // ctx.fill()

    //2.快速创建矩形
    // ctx.rect(0, 0, 200, 200)
    // ctx.stroke()
    // ctx.fillStyle = '#ddd'
    // ctx.fill()

    //3.快速创建描边矩形
    // ctx.strokeRect(0, 0, 200, 200)

    //4.快速创建填充矩形
    // ctx.fillRect(0, 0, 200, 200)

    //5.清除某个区域的矩形
    // ctx.clearRect(0, 0, 200, 200)

    //6.快速创建圆或者弧
    // ctx.arc(450, 300, 200, 0, Math.PI * 2, false)
    // ctx.stroke()
    // ctx.fillStyle = 'blue'
    // ctx.fill()

    //7.绘制文字
    // ctx.font = '20px Arial'
    // ctx.fillStyle = 'red'
    // ctx.strokeText('Hello, world!', 10, 50) // 绘制无填充文字，参数：文字，x，y坐标
    // ctx.fillText('Hello, world!', 10, 50) // 绘制有填充文字，参数：文字，x，y坐标

    //8.绘制图片
    // var img = new Image()
    // img.src = './assets/bg.jpeg'
    // img.onload = function() {
    //     ctx.drawImage(img, 0, 0, 100, 100) // 参数：图片，x，y，宽度，高度)
    // }

    //9.图片裁剪
    // var img = new Image()
    // img.src = './assets/bg.jpeg'
    // img.onload = function() {
    //     ctx.drawImage(img, 0, 0, 100, 100, 100, 50, 50, 100, 100) // 参数：图片，源x，源y，源宽度，源高度，目标x，目标y，目标宽度，目标高度
    // }

    //10.缩放
    // ctx.scale(0.5, 0.5) // 参数：x，y

    //11.位移
    // ctx.translate(300, 100) // 参数：x，y

    //12.旋转
    // ctx.rotate(Math.PI /4) // 参数：弧度值


    // ctx.beginPath()
    // ctx.moveTo(100, 100)
    // ctx.lineTo(300, 100)
    // ctx.lineTo(300, 300)
    // ctx.closePath()
    // ctx.stroke()
    // ctx.fillStyle="red"
    // ctx.fill()

    //13.canvas转base64编码放入img标签
    // var img = new Image()
    // img.src = './assets/bg.jpeg'
    // img.onload = function () {
    //     ctx.drawImage(img, 0, 0, 900, 600) // 参数：图片，x，y，宽度，高度)
    //     var dataUrl = canvas.toDataURL("image/jpeg")
    //     console.log(dataUrl) // 输出base64编码的图片数据
    //     var image = document.createElement('img')
    //     image.src = dataUrl
    //     document.body.appendChild(image) // 显示图片
    // }

    //14.画布渲染画布
    var canvas2 = document.getElementById('cav2')
    var ctx2 = canvas2.getContext('2d')
    var img = new Image()
    img.src = './assets/bg.jpeg'
    img.onload = function () {
        ctx.drawImage(img, 0, 0, 900, 600) // 参数：图片，x，y，宽度，高度)
        ctx2.drawImage(canvas, 0, 0, 900, 600) // 参数：画布，x，y，宽度，高度)
    }
</script>

</html>